<template>
  <el-row class="tac">
	 <el-col class="el-col">
      <h1>News</h1>
      <el-menu
        active-text-color="#ffd04b"
        background-color="#000"
        class="el-menu-vertical-demo"
        :default-active="active"
        text-color="#fff"
        router
      >
        <el-menu-item  index="/article/category">
          <el-icon><icon-menu /></el-icon>
          <span>文章分类</span>
        </el-menu-item>
        
        <el-menu-item index="/article/manage">
          <el-icon><setting /></el-icon>
          <span>文章管理</span>
        </el-menu-item>
				
				<el-sub-menu index="/user/avatar">
          <template #title>
            <el-icon><location /></el-icon>
            <span>个人中心</span>
          </template>
          <el-menu-item index="/user/avatar">
						<el-icon><User /></el-icon>
						基本资料
					</el-menu-item>
          <el-menu-item index="/user/info">
						<el-icon><Crop /></el-icon>
						更换头像
					</el-menu-item>
          <el-menu-item index="/user/resetpassword">
						<el-icon><CirclePlus /></el-icon>
						重置密码
					</el-menu-item>
          
        </el-sub-menu>

      </el-menu>
	</el-col>
</el-row>


</template>

<script lang="ts" setup>
import { useRouter, useRoute } from 'vue-router'
const route = useRoute()

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

//动态的指定导航的位置
const active = route.path;


</script>

<style lang="scss" scoped>
h1{
	text-align: center;
	color: #fff;
}
.el-row{
  background-color: #000;
  height: 100%;
}
.el-col{
  width: 100%;
  
}
.el-menu-vertical-demo{
  width: 100%;
}
</style>